<!-- 气泡组件 -->
<template>
  <div
    v-if="isShow"
    class="container"
    :class="className"
    @click="close"
  >
    {{ content }}
    <div class="angle" />
    <div class="cover-block" />
  </div>
</template>

<script setup lang="ts">
type Props = {
  /** 在父元素的哪个方向显示 */
  position: 'top' | 'bottom' | 'left' | 'right';
  /** 宽 */
  width: string | number;
  /** 最大宽度 */
  maxWidth: string | number;
  /** 高 */
  height: string | number;
  /** 最大高度 */
  maxHeight: string | number;
  content: string;
}

withDefaults(defineProps<Props>(), {
  position: 'top',
  width: 'max-content',
  maxWidth: '200px',
  height: 'auto',
  maxHeight: 'auto',
  content: '',
});

const isShow = ref(false);

const className = ref('test');

const close = () => {
  className.value = 'fade-leave-to fade-leave-active';
  setTimeout(() => {
    isShow.value = false;
    className.value = '';
  }, 300);
};

const open = () => {
  isShow.value = true;
  className.value = 'fade-enter fade-enter-active';

  setTimeout(() => {
    className.value = '';
  }, 300);

  setTimeout(() => {
    close();
  }, 5000);
};

defineExpose({
  open,
  close,
});
</script>

<style scoped lang="scss">
.container{
  $padding-bottom: 15px;
  position: absolute;
  bottom: calc(100% + $padding-bottom );
  left: 50%;
  z-index: 999;

  width: 160px;

  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);

  translate: -50% 0;

  padding: 12px 8px $padding-bottom;

  font-size: 12px;
  line-height: 1.2;
  color: #333;

  // XXX 不生效，原因待查明
  &.fade-enter-active,
  &.fade-leave-active {
    transition: all 0.3s;
  }

  &.fade-enter,
  &.fade-leave-to {
    opacity: 0;
  }

  .angle{
    position: absolute;
    bottom: -10px;
    left: 50%;
    z-index: 1;

    width: 20px;
    height: 20px;

    background-color: #fff;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);

    rotate: 45deg;
    translate: -50% 0;
  }

  .cover-block{
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 2;

    width: calc(100% - 16px);
    height: $padding-bottom;

    content: '';

    background-color: #fff;

    translate: -50% 0;
  }
}
</style>
